import 'package:flutter/material.dart';

// Baseline这个控件，做过移动端开发的都会了解过，一般文字排版的时候，可能会用到它。它的作用很简单，根据child的baseline，来调整child的位置。例如两个字号不一样的文字，希望底部在一条水平线上，就可以使用这个控件，是一个非常基础的控件。

class BaselineDemo extends StatefulWidget {
  BaselineDemo({Key key}) : super(key: key);

  _BaselineDemoState createState() => _BaselineDemoState();
}

class _BaselineDemoState extends State<BaselineDemo> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('BaselineDemo'),
      ),
      body: Column(
        children: <Widget>[
          Container(
            color: Colors.pink,
            child: new Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                new Baseline(
                  baseline: 50.0,
                  baselineType: TextBaseline.alphabetic,
                  child: new Text(
                    'TjTjTj',
                    style: new TextStyle(
                      fontSize: 20.0,
                      textBaseline: TextBaseline.alphabetic,
                    ),
                  ),
                ),
                new Baseline(
                  baseline: 50.0,
                  baselineType: TextBaseline.alphabetic,
                  child: new Container(
                    width: 30.0,
                    height: 30.0,
                    color: Colors.red,
                  ),
                ),
//               baseline：baseline数值，必须要有，从顶部算。

// baselineType：bseline类型，也是必须要有的，目前有两种类型：

// alphabetic：对齐字符底部的水平线；
// ideographic：对齐表意字符的水平线。
                new Baseline(
                  baseline: 50.0,
                  baselineType: TextBaseline.alphabetic,
                  child: new Text(
                    'RyRyRy',
                    style: new TextStyle(
                      fontSize: 45.0,
                      textBaseline: TextBaseline.alphabetic,
                    ),
                  ),
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}
